<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 教务管理系统</title>
    <style>
        body { background: #f0f2f5; font-family: Arial, sans-serif; }
        .info-container {
            width: 400px;
            margin: 80px auto 0 auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px #e0e0e0;
            padding: 36px 32px 28px 32px;
        }
        .info-title {
            text-align: center;
            font-size: 1.5em;
            color: #007BFF;
            margin-bottom: 28px;
            font-weight: bold;
        }
        .info-list { margin-bottom: 10px; }
        .info-list label {
            display: inline-block;
            width: 90px;
            color: #555;
            font-weight: bold;
        }
        .info-list span {
            color: #333;
        }
        .back-btn {
            display: block;
            margin: 30px auto 0 auto;
            background: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 32px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
        .back-btn:hover { background: #0056b3; }

        /* 模态框样式 */
        .modal-bg {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.2);
            z-index: 1000;
        }
        .modal {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px #e0e0e0;
            width: 350px;
            max-width: 90vw;
            padding: 28px 24px 18px 24px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .modal-title {
            font-size: 1.2em;
            color: #007BFF;
            margin-bottom: 18px;
            text-align: center;
        }
        .modal label {
            display: block;
            margin-bottom: 6px;
            color: #555;
        }
        .modal input, .modal select {
            width: 100%;
            padding: 7px 10px;
            margin-bottom: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .modal-btns {
            text-align: right;
        }
        .modal-btns button {
            margin-left: 10px;
            padding: 7px 18px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }
        .modal-btns .ok {
            background: #28a745;
            color: #fff;
        }
        .modal-btns .ok:hover {
            background: #218838;
        }
        .modal-btns .cancel {
            background: #dc3545;
            color: #fff;
        }
        .modal-btns .cancel:hover {
            background: #c82333;
        }
    </style>
</head>
<body>
    <div class="info-container">
        <div class="info-title">个人信息</div>
        <div class="info-list"><label>用户名：</label><span id="userName">-</span></div>
        <div class="info-list"><label>姓名：</label><span id="realName">-</span></div>
        <div class="info-list" id="phoneInfo"><label>手机号：</label><span id="phone">-</span></div>
        <div class="info-list" id="studentInfo" style="display:none;">
            <label>学号：</label><span id="stuNo">-</span><br>
            <label>班级：</label><span id="stuClass">-</span>
        </div>
        <button class="back-btn" onclick="window.history.back()">返回</button>
        <button class="back-btn" style="background:#28a745;margin-top:12px;" onclick="showChangePassword()">修改密码</button>
    </div>

    <!-- 修改密码模态框 -->
    <div class="modal-bg" id="changePasswordBg" style="display:none;">
        <div class="modal">
            <div class="modal-title">修改密码</div>
            <label>原密码</label><input id="oldPasswordInput" type="password" placeholder="请输入原密码" />
            <label>新密码</label><input id="newPasswordInput" type="password" placeholder="请输入新密码" />
            <label>确认密码</label><input id="confirmPasswordInput" type="password" placeholder="请再次输入新密码" />
            <div class="modal-btns">
                <button class="ok" onclick="changePassword()">确定</button>
                <button class="cancel" onclick="closeChangePassword()">取消</button>
            </div>
        </div>
    </div>
    <script>
        // 检查用户是否已登录
        function checkLogin() {
            var user = localStorage.getItem('loginUser');
            if (!user) {
                // 未登录，重定向到登录页面
                window.location.href = 'login.html';
                return false;
            }
            return user;
        }

        // 页面加载时获取用户信息
        document.addEventListener('DOMContentLoaded', function() {
            // 验证登录状态
            var username = checkLogin();
            if (!username) return; // 如果未登录，已重定向到登录页面

            document.getElementById('userName').textContent = username;

            // 从后端获取用户详情
            fetchUserInfo(username);
        });

        // 获取用户详情
        function fetchUserInfo(username) {
            fetch('/api/user/info?username=' + encodeURIComponent(username))
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        var user = result.data;

                        // 设置用户名和姓名
                        document.getElementById('userName').textContent = user.username;
                        document.getElementById('realName').textContent = user.name || '-';

                        // 根据角色处理不同信息
                        if (user.role === 'student') {
                            // 学生用户：隐藏手机号，显示学号和班级
                            document.getElementById('phoneInfo').style.display = 'none';
                            document.getElementById('studentInfo').style.display = '';
                            document.getElementById('stuNo').textContent = user.studentId || '-';

                            // 获取班级名称
                            if (user.classId) {
                                fetchClassName(user.classId);
                            } else {
                                document.getElementById('stuClass').textContent = '-';
                            }
                        } else {
                            // 非学生用户：显示手机号，隐藏学生信息
                            document.getElementById('phoneInfo').style.display = '';
                            document.getElementById('phone').textContent = user.phone || '-';
                            document.getElementById('studentInfo').style.display = 'none';
                        }
                    } else {
                        alert(result.message || '获取用户信息失败');
                    }
                })
                .catch(error => {
                    console.error('获取用户信息失败:', error);
                    alert('获取用户信息失败，请稍后重试');
                });
        }

        // 获取班级名称
        function fetchClassName(classId) {
            fetch('/api/class/detail?id=' + classId)
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        document.getElementById('stuClass').textContent = result.data.name || '-';
                    } else {
                        document.getElementById('stuClass').textContent = '-';
                    }
                })
                .catch(error => {
                    console.error('获取班级信息失败:', error);
                    document.getElementById('stuClass').textContent = '-';
                });
        }

        // 显示修改密码模态框
        function showChangePassword() {
            document.getElementById('changePasswordBg').style.display = 'block';
            // 清空输入框
            document.getElementById('oldPasswordInput').value = '';
            document.getElementById('newPasswordInput').value = '';
            document.getElementById('confirmPasswordInput').value = '';
        }

        // 关闭修改密码模态框
        function closeChangePassword() {
            document.getElementById('changePasswordBg').style.display = 'none';
        }

        // 修改密码
        function changePassword() {
            var oldPassword = document.getElementById('oldPasswordInput').value;
            var newPassword = document.getElementById('newPasswordInput').value;
            var confirmPassword = document.getElementById('confirmPasswordInput').value;
            var username = document.getElementById('userName').textContent;

            // 验证输入
            if (!oldPassword) {
                alert('请输入原密码');
                return;
            }
            if (!newPassword) {
                alert('请输入新密码');
                return;
            }
            if (newPassword !== confirmPassword) {
                alert('两次输入的新密码不一致');
                return;
            }

            // 发送修改密码请求
            fetch('/api/user/changePassword', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    oldPassword: oldPassword,
                    newPassword: newPassword
                })
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('密码修改成功');
                    closeChangePassword();
                } else {
                    alert(result.message || '密码修改失败');
                }
            })
            .catch(error => {
                console.error('密码修改失败:', error);
                alert('密码修改失败，请稍后重试');
            });
        }
    </script>
</body>
</html>
